<template>
  <div class="base-info" :class="{close: isClose}" @blur="divBlur" ref="sBox" tabindex="3">
    <div class="title">
      <span>基本信息</span>
      
      <Icon @click.native="closeBox" type="close" style="float: right; cursor: pointer;" color="#125EAA"></Icon>
    </div>
    <div v-show="infoLoad" class="info">
      <div class="spin-container">
        <Spin style="background: none;" fix></Spin>
      </div>
    </div>
    <div v-show="infoShow" class="info">
      <li>
        <strong>{{infoData.name}}：</strong>
        <Tag color="blue">非基础客户</Tag>
        <Tag color="green">广州分行客户</Tag>
      </li>
      <li>
        <strong>法人代表：</strong>
        吴淞
      </li>
      <li>
        <strong>注册资本：</strong>
        63,834,948.34 万美元
      </li>
      <li>
        <strong>地址：</strong>
        广州市南沙区黄阁镇南大街8号
      </li>
      <li>
        <strong>注册号：</strong>
        91440101717852200L
      </li>
      <li>
        <strong>
          交易摘要-
        </strong>
        <p>
          时间范围：2017年月-2017年12月
        </p>
        <p>
          总交易笔数：
          20（付款:15  收款：1503.81)
        </p>
        <p>
          总交易金额：
          268.27万美元 （收款：3422.34万美元 付款：847344.45万美元)   
        </p>
        <p>
          同名划转笔数：
          6(付款：2  收款：4)
        </p>
        <p>
          同名划转金额：
          268.27万美元 （收款：3422.34万美元 付款：847344.45万美元) 
        </p>
      </li>
      <li>
        <strong>交易详情-</strong>
        <div class="info-chart" ref="infoChart">

        </div>
      </li>
    </div>
  </div>
</template>

<script>
import { Tag, Spin, Icon } from "iview";

import { bus } from "./bus";

// 引入 ECharts 主模块
var echarts = require("echarts/lib/echarts");
// 引入提示框和标题组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
// 引入柱状图
require("echarts/lib/chart/bar");

export default {
  components: {
    Tag, Spin, Icon
  },
  data() {
    return {
      isClose: true,
      isBlur: true,
      infoShow: false,
      infoLoad: false,
      timer: null,
      infoData: {
        name: ""
      }
    };
  },
  methods: {
    initChart() {
      var self = this;
      var mychart = echarts.init(self.$refs.infoChart);

      var data1 = [];
      var data2 = [];
      for (let i = 0; i < 7; i++) {
        data1.push(self.getRandom(50, 300));
        data2.push(-self.getRandom(50, 300));
      }

      var option = {
        title: {
          subtext: "交易金额",
          top: "3px",
          left: "170px"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          bottom: 0,
          data: ["收款", "付款"],
          itemWidth: 16,
          itemHeight: 10,
          textStyle: {
            color: "#666"
          }
        },
        grid: {
          right: 0
        },
        color: ["#EEC92B", "#3374E3"],
        xAxis: {
          type: "category",
          data: ["01-01", "01-02", "01-03", "01-04", "01-05", "01-06", "01-07"],
          axisLine: {
            lineStyle: {
              color: "#999"
            }
          },
          axisLabel: {
            color: "#999"
          }
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#999"
            }
          },
          axisLabel: {
            color: "#999"
          }
        },
        series: [
          {
            name: "收款",
            data: data1,
            stack: "总量",
            type: "bar",
            barMaxWidth: 10,
            itemStyle: {
              barBorderRadius: 5
            }
          },
          {
            name: "付款",
            data: data2,
            stack: "总量",
            type: "bar",
            barMaxWidth: 10,
            itemStyle: {
              barBorderRadius: 5
            }
          }
        ]
      };
      mychart.setOption(option);
    },
    closeBox() {
      var self = this;
      self.isClose = true;

      self.$parent.getPageSize();

      bus.$emit('unhold');
    },
    divBlur() {
      var self = this;
      bus.$emit('unhold');
    }
  },
  mounted() {
    var self = this;

    bus.$on("chartClick", function(data) {
      self.isClose = false;

      setTimeout(function (){
        self.$refs.sBox.focus();
      }, 0);

      self.$parent.getPageSize();

      self.infoShow = false;
      self.infoLoad = true;

      clearTimeout(self.timer);
      
      self.timer = setTimeout(function (){
        self.infoShow = true;
        self.infoLoad = false;
        self.infoData.name = data.data.name;
        setTimeout(function() {
          self.initChart();
        }, 0);
      }, 1000);
      
    });
  }
};
</script>

<style scoped>
.base-info {
  transition: .6s;
  background: rgba(255, 255, 255, .9);
  margin-top: 10px;
  border-radius: 4px;
  padding: 10px;
  box-shadow: 0 0 3px rgba(0, 0, 0, .3);
  outline: none;

  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1;
  width: 400px;
  height: calc(100% - 60px);
  overflow-y: auto;
  max-height: 1400px;
  /* height: calc(100% - 60px); */
}
.base-info.close {
  right: -420px;
}
.base-info .title {
  margin-bottom: 45px;
}
.base-info .title span {
  display: inline-block;
  font-size: 20px;
  border-bottom: 2px solid #306adf;
}
.base-info .info li {
  margin-bottom: 10px;
}
.base-info .info li p {
  padding-left: 17px;
}
.info-chart {
  height: 300px;
}

.spin-container {
  height: 100px;
  position: relative;
}
</style>
